﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>普通-垂直菜单</title>


    <link href="../css/superfish.css" rel="stylesheet" type="text/css" />
    <link href="../css/superfish-vertical.css" rel="stylesheet" type="text/css" />


    <script src="../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../Scripts/hoverIntent.js" type="text/javascript"></script>
    <script src="../Scripts/superfish.js" type="text/javascript"></script>


    <script type="text/javascript">

        $(document).ready(function () {
            var example = $('#example').superfish({
                //add options here if required
            });
        })

    </script>



</head>
<body>



<pre><code>

垂直菜单， 相对于 水平菜单。
只需要 修改 2个地方.

1.样式表的位置，在原有的 superfish.css  后面增加一个 superfish-vertical.css
2.菜单的样式定义上，在原有的  sf-menu 后面增加一个 sf-vertical

</code></pre>




		<ul class="sf-menu  sf-vertical" id="example">
			<li class="current">
				<a href="#">文件</a>
				<ul>
					<li class="current">
						<a href="#">新建</a>
						<ul>
							<li class="current"><a href="#">项目</a></li>
							<li><a href="#">网站</a></li>
							<li><a href="#">团队项目</a></li>
							<li><a href="#">文件</a></li>
							<li><a href="#">从现有代码创建项目</a></li>
						</ul>
					</li>
					<li>
						<a href="#">打开</a>
						<ul>
							<li><a href="#">项目/解决方案</a></li>
							<li><a href="#">网站</a></li>
							<li><a href="#">团队项目</a></li>
							<li><a href="#">文件</a></li>
							<li><a href="#">转换</a></li>
						</ul>
					</li>
					<li>
						<a href="#">添加</a>
						<ul>
							<li><a href="#">新建项目</a></li>
							<li><a href="#">新建网站</a></li>
							<li><a href="#">现有项目</a></li>
							<li><a href="#">现有网站</a></li>
						</ul>
					</li>
				</ul>
			</li>

			<li>
				<a href="#">编辑</a>
				<ul>
                    <li>
						<a href="#">撤销</a>
					</li>
                    <li>
						<a href="#">重做</a>
					</li>
                    <li>
						<a href="#">剪切</a>
					</li>
                    <li>
						<a href="#">复制</a>
					</li>
                    <li>
						<a href="#">粘贴</a>
					</li>
					<li>
						<a href="#">查找和替换</a>
						<ul>
							<li><a href="#">快速查找</a></li>
							<li><a href="#">快速替换</a></li>
							<li><a href="#">在文件中查找</a></li>
							<li><a href="#">在文件中替换</a></li>
							<li><a href="#">查找符号</a></li>
						</ul>
					</li>
				</ul>
			</li>


			<li>
				<a href="#">视图</a>

				<ul>
                    <li>
						<a href="#">设计器</a>
					</li>

                    <li>
						<a href="#">标记</a>
					</li>
                </ul>

			</li>	



            <li>
				<a href="#">项目</a>
				<ul>
                    <li>
						<a href="#">添加类 </a>
					</li>

                    <li>
						<a href="#">添加引用 </a>
					</li>
                </ul>
			</li>

            <li>
				<a href="index.htm">返回</a>
            </li>
		</ul>







</body>
</html>
